<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" >
      <el-form :inline="true" :model="filters" :size="size" >
        <el-row class="search-input">
          <el-form-item label="店铺名称：">
            <el-input v-model="filters.shopname" placeholder="店铺名称"></el-input>
          </el-form-item>
          <!-- <el-row class="times"> -->
          <el-form-item label="入驻时间：">
            <el-date-picker
              v-model="filters.startDate"
              type="date"
              placeholder="入驻开始时间">
            </el-date-picker>
            <!-- <span class="times-to">-</span> -->
            -
            <el-date-picker
              v-model="filters.endDate"
              type="date"
              placeholder="入驻截止时间">
            </el-date-picker>
          </el-form-item>
          <!-- </el-row> -->
          <el-form-item label="打款确认：">
            <el-select v-model="filters.is_money_transfer" placeholder="打款确认" >
              <el-option label="通过打款确认" value="0">通过打款确认</el-option>
              <el-option label="不通过打款确认" value="1">不通过打款确认</el-option>
            </el-select>
          </el-form-item>
        </el-row>


        <el-row class="search-button">

          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                       @click="findPageByDate(filters)"/>
          </el-form-item>
          <!-- <el-form-item>
                      <kt-button icon="fa fa-plus" :label="$t('action.add')"  type="primary" @click="handleAdd" />
                  </el-form-item> -->
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" @click="reset"
                       type="primary"/>
          </el-form-item>


        </el-row>

      </el-form>
    </div>
    <div class="toolbar" >
      <el-form :inline="true" :size="size">
        <el-form-item class="w100 t_r">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                  @handleFilterColumns="handleFilterColumns">
      </table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table :height="350"
              :data="pageResult" :columns="filterColumns"
              @findPage="findPage" ref="CyTable"
              :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=false
              :showDetailOperation=true @handleDetail="handleDetail">
    </cy-table>
    <!--新增编辑界面-->
    <el-dialog :title="operation?'账户确认':'账户确认'" width="65%" :visible.sync="dialogVisible"
               :close-on-click-modal="false" @closed="handleClose">
      <p>店铺名称： 戴瑞特-牛市 入驻时间：2019-05-17 15:40:23 商家编码： S00743 合同有效期：2019-05-17---2022-05-27</p>
      <cy-table :height="350"
                :data="pageResult" :columns="detailColumns"
                @findPage="findPageMock" ref="CyTable"
                :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=false
                :showDetailOperation=false :showOperation=true :showSelection=false :showMockOperation=true
                @handleDetail="handleDetail">
      </cy-table>


      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" type="primary" @click.native="dialogVisible = false">
          {{$t('action.cancel')}}
        </el-button>
        <!-- <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button> -->
      </div>
    </el-dialog>

  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import CyTable from "@/views/Core/CyTable"
  import KtButton from "@/views/Core/KtButton"
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
  import {format} from "@/utils/datetime"

  export default {
    components: {
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        imgUpload: this.utils.getUpLoadHost(),
        size: 'small',
        document_license: '',
        filters: {
          name: ''
        },

        imgs: '',
        fileList: {},
        columns: [],
        warehouselist: [],
        filterColumns: [],
        detailColumns: [
          {prop: "accont_name", label: "账户名", minWidth: 120},
          {prop: "bank", label: "银行", minWidth: 120},
          {prop: "account_branch", label: "支行", minWidth: 120},
          {prop: "account", label: "账号", minWidth: 120},
          {prop: "is_master_account", label: "是否主账号", minWidth: 120},
          {prop: "is_get_amount", label: "是否收到打款", minWidth: 120},
        ],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        pageResultDetail: {
          "rows":
            [{
              "bank": "浦发银行",
              "accont_name": "蔡玉龙",
              "account": "13613694244",
              "account_branch": "浦发银行徐汇支行",
              "is_get_amount": "是",
              "is_master_account": "是",
            }],
          "total": 1,
          "mock_title":"打款确认",
          "code": "0000"
        },
        dialogImageUrl: '',

        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        printPage: false,
        dialogVisibleImage: false,
        dataForm: {},
        deptData: [],
        deptTreeProps: {
          label: 'name',
          children: 'children'
        },
        roles: [],
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

      }
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        this.filters.t = 'businessAccount'
        this.$refs.CyTable.findPage(this.filters)
      },
      //mock数据
      findPageMock: function () {
        this.$refs.CyTable.findPageMock(this.pageResultDetail)
      },
      // 根据日期查询数据
      findPageByDate: function (data) {
        this.filters.t = 'businessAccount'
        this.$refs.CyTable.findPageByDate(this.filters)
      },
      //弹窗关闭方法
      handleClose() {
        this.$refs.dataForm.resetFields()
      },
      // 批量删除
      handleDelete: function (data) {
        var ids = '';
        for (var i = 0; i < data.params.length; i++) {
          ids = ids + data.params[i].id + ',';
        }
        data.t = 'businessAccount'
        data.ids = ids
        this.utils.request.deleteUserInfo(data, this.deleteInfoBack)
      },
      //删除callback
      deleteInfoBack(data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败, ', type: 'error'})
        }
        this.findPage();
      },

      //导入方法
      importexe() {
        this.printPage = true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //列表下载
      downloadExcel() {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let filename = "商家收款账户"
          this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
        }).catch(() => {

        });
      },
      // 显示新增界面
      handleAdd: function () {
        this.dialogVisible = true
        this.operation = true
        this.dataForm.id = "";
        //this.dataForm={};
        if (this.$refs['dataForm'] != undefined) {
          this.$refs['dataForm'].resetFields();
        }
        this.dataForm.document_license = "";
      },
      // 打印
      print: function () {
        this.printPage = true
        this.operation = true
      },
      reset: function () {
        this.filters = {};
        this.findPage()
      },

      // 显示编辑界面
      handleDetail: function (params) {
        console.log(params)
        this.dialogVisible = true
        this.operation = false
        var this_ = this;
        this.$nextTick(function () {
          this_.dataForm = Object.assign({}, params.row);
        });
        // var search={};
        // search.id=params.row.id
        // search.t="invoiceManage";

        // this.utils.request.queryUserInfo(search,function(res){

        //     if(res.code == "0000"){
        // 		}else{
        // 			this_.$message({message: '获取产品信息异常', type: 'error'});
        // 		}

        // })

      },
      // 编辑
      submitForm: function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              params.t = 'businessAccount';
              this.utils.request.editUserInfo(params, this.editInfoBack)
            })
          }
        })
      },
      // 新增修改回调
      editInfoBack: function (data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败', type: 'error'})
        }
        this.findPage();
        this.dialogVisible = false
        this.operation = false
        this.editLoading = false
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property])
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = [
          {prop: "businessman", label: "商家名称", minWidth: 120},
          {prop: "shopname", label: "店铺名称", minWidth: 120},
          {prop: "is_money_transfer", label: "是否通过打款确认", minWidth: 120, formatter: this.yesOrNo},
          {prop: "join_time", label: "入驻时间", minWidth: 120},
          {prop: "contract_time", label: "合同有效期", minWidth: 120}
        ]
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp;
      },
      yesOrNo: function (row, column, cellValue, index) {
        if (cellValue == 0) {
          return '是'
        } else if (cellValue == 1) {
          return '否'
        }
      },

    },
    mounted() {
      this.findPage()
      this.initColumns()
    }

  }
</script>

<style lang="scss" scoped>
</style>
